<template>
  <div class="order-con">
    <div class="bannerbox">
      <!--<img class="backimg" src="../../assets/images/newimg/z12@2x.png" alt="" />-->
    </div>
    <!-- 标题 -->
    <div class="head">
      <img src="../../assets/images/newimg/back.png" alt="">
      <span>我的订单</span>
    </div>
    <div class="orderList" v-for="(item,index) in dataList" :key="index">
      <div class="order-num">
        <div>
          <span>订单号</span>
          {{item.orderName}}
        </div>
        <span>{{item.orderDate | dataFormat('yyyy-MM-dd hh:mm:ss')}}</span>
      </div>
      <ul>
        <li v-for="(res,index) in item.orderValue" :key="index">
          <div>
            <img :src="res.businessPic" alt="">
            <span>{{res.businessName}}</span>
          </div>
          <span :class="res.after==1?'active':''" @click="write(res.businessId)">{{res.after==1?'已使用':'使用'}}</span>
        </li>
        <!--<li>-->
        <!--<div>-->
        <!--<img src="../../assets/images/newimg/xz7@2x.png" alt="">-->
        <!--<span>精彩店(呵呵哒分店)</span>-->
        <!--</div>-->
        <!--<span class="active">使用</span>-->
        <!--</li>-->
      </ul>
    </div>
  </div>
</template>

<script>
  import {MessageBox} from 'mint-ui'

  export default {
    data () {
      return {
        activityId: '',
        userOpenId: '',
        data: '',
        dataList: [],
        staticbtn: '1',
        sy: '使用',

      }
    },
    methods: {
      // 核销
      write (businessId) {

       MessageBox({
          // title: '确认',
          message: '确定使用吗?',
          showCancelButton: true
        }).then(action => { 
           if (action == 'confirm') {     //确认的回调
              console.log(businessId)
                var that = this
                this.$http({
                  method: 'get',
                  url: 'http://api.wangjianxin.top/after?activityId=' + that.activityId + '&userOpenId=' + that.userOpenId + '&businessId=' + businessId
                }).then(function (resp) {
                  console.log(resp);
                  if (resp.status === 200) {
                    if (Number(resp.data) === 1) {
                       MessageBox({
                        message: '核销成功!',
                      });

                      setTimeout(function(){
                        location.reload()
                      },1000)

                    } else if (Number(resp.data) === 0) {
                        MessageBox({
                          message: '核销失败!',
                        });
                    } else if (Number(resp.data) === 99) {
                      MessageBox({
                        message: '已经核销过了!',
                      });
                    }
                  }
                })
           }
           }).catch(err => { 
           if (action == 'cancel') {     //取消的回调
            alert('取消核销')
           } 
           });
    }
    },
    mounted () {
      var that = this
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/myOrder?activityId=' + that.activityId + '&userOpenId=' + that.userOpenId
      }).then(function (resp) {
        if (resp.status === 200) {
          that.dataList = resp.data
          console.log(that.dataList)
        }
      })
    },
    created () {
      this.activityId = this.$route.params.activityId
      this.userOpenId = this.$route.params.openId

    }
  }
</script>

<style scoped>
  .order-con {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
  }

  .backimg {
    width: 7.5rem;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -99;
  }

  /* 标题 */

  .head {
    width: 100vw;
    height: 1rem;
    /*background: #111111;*/
    font-size: 0.30rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(51, 54, 58, 1);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .head img {
    width: .2rem;
    position: absolute;
    left: .3rem;
    top: .35rem
  }

  .head span {
    font-size: .3rem;
    /*color: #fff;*/
  }

  /* 订单列表 */

  .orderList {
    width: 85%;
    margin: .5rem 5% 0;
    border-radius: 0.1rem;
    box-shadow: 0 0 0.24rem 0.05rem rgba(184, 184, 184, 0.35);
    /*background: rgba(204, 204, 204, .3);*/
    padding: .2rem;
  }

  .orderList .order-num,
  .order-num div > span {
    font-size: 0.26rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
  }

  .order-num,
  .orderList ul > li,
  .orderList ul > li div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .order-num div {
    color: #fff;
  }

  .orderList ul {
    padding-top: .2rem;
  }

  .orderList li {
    font-size: .24rem;
    color: #fff;
    border-bottom: .02rem solid #444;
    padding: .15rem 0;
  }

  .orderList li:last-child {
    border-bottom: none;
  }

  .orderList li img {
    width: .9rem;
  }

  .orderList li div span {
    padding-left: .2rem;
    font-size: 0.24rem;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(74, 74, 74, 1);
  }

  .orderList li > span {
    width: 1.80rem;
    height: 0.56rem;
    border: 0.02rem solid rgba(51, 54, 58, 1);
    border-radius: 0.15rem;
    text-align: center;
    line-height: .56rem;
    font-size: 0.26rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(17, 17, 17, 1);
  }

  .orderList li > span.active {
    color: rgba(255, 255, 255, 1);
    background: rgba(51, 54, 58, 1);
  }
</style>
